<template>
  <div class="cart">
    <h2>Your Cart</h2>
    <p v-show="!products.length"><i>Please add some products to cart.</i></p>
    <div v-for="product in products" :key="product.id">
      <el-tag >
        {{ product.title }} - {{ product.price | currency }} x
        {{ product.quantity }}</el-tag
      >
    </div>
    <p>Total: {{ total | currency }}</p>
    <p>
      <el-button
        type="success"
        :disabled="!products.length"
        @click="checkout(products)"
        >Checkout</el-button
      >
    </p>
    <p v-show="checkoutStatus">Checkout {{ checkoutStatus }}.</p>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      checkoutStatus: state => state.cart.checkoutStatus
    }),
    ...mapGetters("cart", {
      products: "cartProducts",
      total: "cartTotalPrice"
    })
  },
  methods: {
    checkout(products) {
      this.$store.dispatch("cart/checkout", products);
    }
  }
};
</script>
